<template>
<view class="bg1">
<view class="id1">
  招生宣传
</view>
  <view class="input">
    <input type="search"
    calss="search-input"
    placeholder="请输入搜索内容">
  </view>
</view>
  <liuyuno-tabs  @tabClick="tabchange" tabindex="index"  :tabData="tabs"></liuyuno-tabs>
  <scroll-view scroll-y class="activity-list">
  <view class="xh"
        v-if="index == 0"
        v-for="item in  arr"
        :key="item.id"
        @click="goDetail(item)">
    <view class="activity-background  df"   >
    <view class="title">{{ item.title }}</view>
    <view class="status">{{ item.status }}</view>
    <view class="info">计划开始日期：{{ item.startDate }}</view>
    <view class="info">计划结束日期：{{ item.endDate }}</view>
    <view class="info">活动区域：{{ item.region }}</view>
    <view class="info">牵头宣传组：{{ item.group }}</view>
    <view class="participants">{{ item.participants }}人已经参与活动，赶紧报名吧！</view>
  </view>
  </view>
    <view v-else-if="index==1" >
      <view class="activity-background  df"  v-for="item in sch" :key="item.id" @click="goSchool(item)" >
<view class="title">{{item.school}}</view>
<view class="status">{{item.status}}</view>
<view class="info">计划开始日期{{item.startDate}}</view>
<view class="info">计划结束日期{{item.endDate}}</view>
<view class="info">活动区域{{item.region}}</view>
<view class="info">牵头宣传组{{item.group}}</view>
<view class="participants">{{item.participants}}人已经参与活动，赶紧报名吧！ </view>

      </view>
    </view>
<!---->
  </scroll-view>

</template>

<script setup>
import { ref } from 'vue'
import liuyunoTabs from "@/components/liuyuno-tabs/liuyuno-tabs.vue";
const tabs=['招宣活动','母校行']
const index=ref(0)
const tabchange=(value)=>{
  index.value=value
}
 const arr=[
   {
     title:'2023届应招生活动',
     status:'正在招生',
     startDate:'2023/2/29',
     endDate:'2023',
     region:'山西省',
     group:'中北大学招生办',
     participants:'2',

   }, {
     title:'2023届应招生活动',
     status:'正在招生',
     startDate:'2023/2/29',
     endDate:'2023',
     region:'山西省',
     group:'中北大学招生办',
     participants:'2',

   }, {
     title:'2023届应招生活动',
     status:'正在招生',
     startDate:'2023/2/29',
     endDate:'2023',
     region:'山西省',
     group:'中北大学招生办',
     participants:'2',

   },
 ]
const sch=[
    {school:'中北大学',
      stuatus:'正在招生',
      startDate:'2023/4/15',
      endDate:'2023/4/15',
      region:'太原市尖草坪',
      participants:'2',
}, {school:'中北大学',
    stuatus:'正在招生',
    startDate:'2023/4/15',
    endDate:'2023/4/15',
    region:'太原市尖草坪',
    participants:'2',
  }, {school:'中北大学',
    stuatus:'正在招生',
    startDate:'2023/4/15',
    endDate:'2023/4/15',
    region:'太原市尖草坪',
    participants:'2',
  }
]
function goSchool(item) {
  uni.navigateTo({
    url: `/pages/index/huodongxiangqing`
  })
}
function goDetail(item) {
  uni.navigateTo({
    url: `/pages/index/huodongxiangqing`
  })
}

</script>

<style>
.bg1{
  background: url("../../static/images/bg.png");
  height: 200px;

}
.id1{
  text-align: center;
  height: 100px;
  line-height: 100px;
  font-size: 40px;
}
.input {
  display: flex;
  align-items: center;
  width: 690rpx;              /* 与卡片同宽 */
  height: 80rpx;
  margin: 30rpx auto;
  padding: 0 30rpx;
  background: #ffffff;
  border-radius: 40rpx;      /* 胶囊圆角 */
  box-shadow: 0 4rpx 20rpx 0 rgba(0, 0, 0, 0.08);
  transition: border-color 0.2s;
}
.title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 8rpx;
}
.status {
  color: #e64340;
  margin-bottom: 12rpx;
}
.info {
  font-size: 18rpx;
  color: #666;
  margin-bottom: 6rpx;
}
.participants {
  margin-top: 12rpx;
  color: #888;
  font-size: 20rpx;
}
.activity-list {
  margin-bottom: 100rpx;
}
.xh {
  display: flex;
  justify-content: center; /* 水平居中 */
  background: transparent; /* 去掉原来的白色，避免重复 */
  margin-bottom: 20rpx;
  padding: 0;              /* 去掉内边距，交给内部白色块 */
}
.activity-background {
  width: 690rpx;          /* 1. 响应式宽度 */
  margin: 0 auto;         /* 2. 关键：左右 auto 就居中 */
  height: 250rpx;
  background: #ffffff;
  box-shadow: 0 3px 6px 0 #c9cfd980;
  border-radius: 8px;
}




</style>
